const PropTypes = require('prop-types');
const React = require('react');
const {
    View,
    StyleSheet,
    Platform
} = require('react-native');
const {
    JDImage,
    JDText,
    JDDevice,
} = require('@areslabs/jdreact-core-lib');

class ContentHeader extends React.Component {
    static propTypes = {
        source: Platform.OS === 'web' ? PropTypes.string : PropTypes.number,
        text: PropTypes.string,
    };

    render() {
        return (
            <View style={styles.wrapper}>
                <JDImage style={styles.img} source={this.props.source}/>
                <JDText style={styles.text}>
                    {this.props.text}
                </JDText>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        marginTop:30,
        marginBottom:30,
        marginLeft:20,
        marginRight:20,
        justifyContent:'center',
        alignItems:'center',
    },
    text: {
        color:'#282C3D',
        marginTop:20,
        fontSize:16,
    },
    img:{
        width:JDDevice.getRpx(400),
        height:JDDevice.getRpx(210),
    },
});

module.exports = ContentHeader;
